<template>
  <div style="height: 100%">
    <div class="wrap">
      <div class="contentWrap">
        <div class="contentItem" v-for="(item, index) in list" :key="index">
          <van-row>
            <van-col span="18">
              <h1>{{ item.name }}</h1>
            </van-col>
            <van-col span="6">
              <van-switch v-model="item.checked" @change="changeSwitch(item)" />
            </van-col>
          </van-row>
          <van-row style="margin-top: 20px">
            <van-col span="3">
              <img src="../../assets/images/Light/low.png">
            </van-col>
            <van-col span="16">
              <div class="Slider" >
                <slider
                    @click.native="clickSlider(item)"
                    v-model="item.brightness"
                    :disabled="item.isOn === 4 || item.isOn === 3"
                    :step="step"
                    :min="25"
                    :max="100"
                    @change="setChangeBright(item)"
                    @input="val => operateStep(val, item)">
<!--                  <template #button>-->
<!--                    <div class="custom-button">{{ item.brightness }}</div>-->
<!--                  </template>-->
                </slider>
              </div>
            </van-col>
            <van-col span="4" offset="1">
              <img src="../../assets/images/Light/high.png">
            </van-col>
<!--            <van-col span="5">-->
<!--              <div class="checkBox"><checkbox v-model="item.selected" shape="square"></checkbox></div>-->
<!--            </van-col>-->
          </van-row>
          <van-row style="margin-top: -5px">
            <van-col span="2">
            </van-col>
            <van-col span="5"><span class="percent">25</span></van-col>
            <van-col span="6"><span class="percent">50</span></van-col>
            <van-col span="5"><span class="percent">75</span></van-col>
            <van-col span="5"><span class="percent">100</span></van-col>
            <van-col span="4" offset="1">
            </van-col>
          </van-row>
        </div>
      </div>
      <div class="topBtn">
        <van-button type="primary" @click="navToSet">设置定时开关</van-button>
      </div>
      <div class="btnWrap">
        <van-button type="primary" @click="allOpen">全开</van-button>
        <van-button type="danger" @click="allClose">全关</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { queryBrightness, totalBrightControl, setChangeBright } from '@/api/Light'
import { Button, Row, Col, Switch, Slider, Toast } from 'vant'
export default {
  components: {
    VanButton: Button,
    VanRow: Row,
    VanCol: Col,
    VanSwitch: Switch,
    Slider
  },
  data () {
    return {
      step: 25,
      list: []
    }
  },
  mounted () {
    this.queryBrightness()
  },
  methods: {
    clickSlider (item) {
      if (item.isOn === 4 || item.isOn === 3) {
        Toast.fail('调节亮度前请先打开打光！')
      }
    },
    async operateStep (val, item) {
      if (val >= item.originBrightness + this.step) {
        item.brightness = item.originBrightness + this.step
      }
      if (val <= item.originBrightness - this.step) {
        item.brightness = item.originBrightness - this.step
      }
      // let res = await setChangeBright({
      //   brightness: item.brightness,
      //   room: item.name
      // })
      // if (res.code === 0) {
      //   await Toast.success('设置成功!')
      //   // 设置连续操作的时间间隔
      //   await setTimeout(() => {
      //     this.queryBrightness()
      //   }, 500)
      // }
    },
    navToSet () {
      this.$router.push('/digital/lightSet')
    },
    async queryBrightness () {
      let res = await queryBrightness()
      if (res.code === 0) {
        this.list = []
        for (let i of res.result) {
          this.list.push({
            name: i.room,
            isOn: i.isOn,
            checked: i.isOn === 2,
            brightness: Number(i.brightness) === 0 ? 25 : Number(i.brightness),
            // 记录亮度初始值用来判断disabled使每次只能操作一格档位
            originBrightness: Number(i.brightness)
          })
        }
      }
    },
    async changeSwitch (item) {
      let res = await totalBrightControl({
        lightSwitch: item.checked,
        room: item.name
      })
      if (res.code === 0) {
        await Toast.success('设置成功!')
        await this.queryBrightness()
      } else {
        await Toast.fail(res.msg)
        await this.queryBrightness()
      }
    },
    async setChangeBright (item) {
      let a
      if (item.brightness > item.originBrightness) {
        a = true
      }
      if (item.brightness < item.originBrightness) {
        a = false
      }
      let res = await setChangeBright({
        brightness: item.brightness,
        brighter: a,
        room: item.name
      })
      if (res.code === 0) {
        await Toast.success('设置成功!')
        // 设置连续操作的时间间隔
        await setTimeout(() => {
          this.queryBrightness()
        }, 500)
      } else {
        await Toast.fail(res.msg)
        await this.queryBrightness()
      }
    },
    async allOpen () {
      let res = await totalBrightControl({
        lightSwitch: true
      })
      if (res.code === 0) {
        await Toast.success('设置成功!')
        await this.queryBrightness()
      }
    },
    async allClose () {
      let res = await totalBrightControl({
        lightSwitch: false
      })
      if (res.code === 0) {
        await Toast.success('设置成功!')
        await this.queryBrightness()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap {
    width: 100%;
    height: 100%;
    padding: 10% 5%;
    box-sizing: border-box;
    .topBtn {
      margin-top: 5%;
      margin-bottom: 8%;
      text-align: center;
      .van-button--normal {
        font-size: 15px;
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 500;
        color: white;
        letter-spacing: 2px;
        width: 70%;
        height: 30px;
        border-radius: 18px;
        border: none;
        background: linear-gradient(#58e9ff 0%, #1e9bfa 100%);
        box-shadow: 0px 1px 2px 0px #226eaf;
      }
    }
    .contentWrap {
      margin-top: 5%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .contentItem {
        padding: 15px 2%;
        box-sizing: border-box;
        width: 47.5%;
        height: 100px;
        background: url("../../assets/images/Light/contentBg.png");
        background-size: 100% 100%;
        /*box-shadow: 0px 1px 2px #cccccc;*/
        /*border-radius: 5px;*/
        margin-bottom: 5%;
        img {
          width: 12px;
          height: 12px;
        }
        h1 {
          font-size: 15px;
          font-family: PingFang SC Bold, PingFang SC Bold-Bold;
          font-weight: 700;
          color: #333333;
        }
        .van-switch {
          font-size: 12px;
        }
        .van-switch--on {
          background-color: rgba(102, 188, 238, 0.46);
          /deep/ .van-switch__node {
            background: linear-gradient(#58e9ff 0%, #1e9bfa 100%);
            box-shadow: 0px 1px 2px #226eaf;
          }
        }
        .Slider {
          height: 16px;
          display: flex;
          align-items: center;
          .van-slider {
            /deep/ .van-slider__button {
              width: 12px;
              height: 12px;
            }
          }
        }
        .checkBox {
          /deep/ .van-checkbox__icon {
            font-size: 15px;
            border: 1px solid #2EB0FC;
          }
        }
      }
    }
    .btnWrap {
      width: 100%;
      height: 45px;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      .van-button--normal {
        width: 30%;
        height: 30px;
        border-radius: 15px;
        font-size: 15px;
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 500;
        color: #ffffff;
        letter-spacing: 3px;
        border: none;
      }
      .van-button--primary {
        background: linear-gradient(#58e9ff 0%, #1e9bfa 100%);
        box-shadow: 0px 1px 2px #226eaf;
      }
      .van-button--danger {
        background: linear-gradient(#ff89a5 0%, #fc5a69 100%);
        box-shadow: 0px 1px 2px #d93e3e;
        margin-left: 10%;
      }
    }
  }
  .percent {
    font-size: 10px;
  }
</style>
